<template>
  <div class="upload-wrapper">
    <div class="upload-btn" @click="handleClick">
      <!--      <slot></slot>-->
      <img src="/public/picture.png"/>
    </div>
    <input type="file" accept="image/*" class="fileInput" @change="handleChange($event)"/>
    <!-- <loading v-show="isLoading"></loading> -->
  </div>
</template>

<script>

import {uploadImage} from '../../api/message'
import {ElMessage} from 'element-plus'
import {defineComponent, toRefs, watch, nextTick, ref, onMounted, reactive} from 'vue'

export default {
  emits: ["setMsgBody"],
  setup(props, context) {
    const handleClick = () => {
      document.querySelector('.fileInput').click()
    }

    const handleChange = (e) => {
      let files = e.target.files
      let form_data = new FormData()
      form_data.append('image', files[0])
      uploadImage(form_data).then(result => {
        if (result.status === "success") {
          context.emit('setMsgBody', result.data, 3, true)
        } else {
          ElMessage.error(result.message)
        }
      })
    }

    return {
      handleClick,
      handleChange
    }
  }
}

</script>

<style scoped>
.fileInput {
  display: none;
}
</style>
